<template>
  <div class="app-container">
    <!--    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" @click.left.native="close">-->
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px">
      <el-form-item label="小区" prop="areaName">
        <el-select v-model="queryParams.areaName" :filter-method="filterMethod" allow-create clearable
                   default-first-option
                   filterable placeholder="请输入小区" size="small" @change="getGroup(queryParams.areaName)">
          <el-option v-for="(item, index) in areaIdOptions" :key="index" :disabled="item.disabled"
                     :label="item.areaName" :value="item.areaName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼宇" prop="groupName">
        <el-select v-model="queryParams.groupName" clearable placeholder="请输入楼宇" size="small"
                   @change="getUnit(queryParams.areaName,queryParams.groupName)">
          <el-option v-for="(item, index) in groupIdOptions" :key="index" :disabled="item.disabled"
                     :label="item.groupName" :value="item.groupName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单元" prop="unitName">
        <el-select v-model="queryParams.unitName" clearable placeholder="请输入单元" size="small">
          <el-option v-for="(item, index) in unitNameOptions" :key="index" :disabled="item.disabled"
                     :label="item.unitName" :value="item.unitName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="户" prop="doorName">
        <el-input
          v-model="queryParams.doorName"
          clearable
          placeholder="请输入户"
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="房屋编号" prop="houseId">
        <el-input
          v-model="queryParams.houseId"
          clearable
          placeholder="请输入房屋编号"
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="userName">
        <el-input
          v-model="queryParams.userName"
          clearable
          placeholder="请输入姓名"
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="small" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>

    <el-form-item>
      <el-button
        :disabled="single"
        icon="el-icon-edit"
        plain
        size="small"
        type="success"
        @click="handleUpdate"
        v-hasPermi="['house:door:handleUpdate']"
      >户迁移
      </el-button>
      <el-button
        :disabled="multiple"
        icon="el-icon-delete"
        plain
        size="small"
        type="danger"
        @click="handleDelete"
        v-hasPermi="['house:door:handleDelete']"
      >删除
      </el-button>

      <el-button
        icon="el-icon-download"
        plain
        size="small"
        type="warning"
        @click="handleExport"
        v-hasPermi="['house:door:handleExport']"
      >导出
      </el-button>
      <el-button
        icon="el-icon-upload"
        plain
        size="small"
        type="warning"
        @click="handleImport"
        v-hasPermi="['house:door:handleImport']"
      >导入
      </el-button>
    </el-form-item>

    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          icon="el-icon-plus"
          plain
          size="mini"
          type="primary"
          @click="handleAdd"
          v-hasPermi="['house:door:handleAdd']"
        >新增
        </el-button>
      </el-col>

      <el-col :span="0.1">
        <el-button
          :disabled="single"
          :style="{width: '120px'}"
          @click="infoCheck"
          icon="el-icon-edit"
          plain
          size="mini"
          type="primary"
          v-hasPermi="['house:door:infoCheck']"
        >基础信息修改
        </el-button>
      </el-col>

      <el-col :span="0.1">
        <el-button
          :disabled="single"
          :style="{width: '120px'}"
          @click="doorCostCheck"
          icon="el-icon-edit"
          plain
          size="mini"
          type="primary"
          v-hasPermi="['house:door:doorCostCheck']"
        >户资金修改
        </el-button>
      </el-col>

      <el-col :span="0.1">
        <el-button
          :disabled="single"
          :style="{width: '120px'}"
          @click="parameterCheck"
          icon="el-icon-edit"
          plain
          size="mini"
          type="primary"
          v-hasPermi="['house:door:parameterCheck']"
        >户参数修改
        </el-button>
      </el-col>


      <el-col :span="0.1">
        <el-button
          :disabled="single"
          :style="{width: '120px'}"
          @click="cost"
          icon="el-icon-edit"
          plain
          size="mini"
          type="primary"
          v-hasPermi="['house:door:cost']"
        >缴费
        </el-button>
      </el-col>


      <el-col :span="0.1">
        <el-button
          :disabled="single"
          :style="{width: '120px'}"
          @click="refund"
          icon="el-icon-edit"
          plain
          size="mini"
          type="primary"
          v-hasPermi="['house:door:refund']"
        >退款
        </el-button>
      </el-col>


      <el-col :span="0.1">
        <el-button
          :disabled="single"
          :style="{width: '120px'}"
          @click="doorReturn"
          icon="el-icon-edit"
          plain
          size="mini"
          type="primary"
          v-hasPermi="['house:door:doorReturn']"
        >资金返还
        </el-button>
      </el-col>


      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!--    <el-table :cell-style="tableRowClassName" v-loading="loading" :data="doorList" @selection-change="handleSelectionChange" @cell-contextmenu="preventSelect" @contextmenu.prevent.native="openMenu($event)" @click.left.native="close" >-->
    <el-table v-loading="loading" :cell-style="tableRowClassName" :data="doorList"
              @row-click="onSelectOp"
              @select-all="onSelectAll"
              @selection-change="selectItem"
              highlight-current-row
              ref="multipleTable"
              style="width: 100%" height="375">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column align="center" label="小区" prop="areaName" width="120"/>
      <el-table-column align="center" label="楼宇" prop="groupName"/>
      <el-table-column align="center" label="单元" prop="unitName"/>
      <el-table-column align="center" label="户" prop="doorName"/>
      <el-table-column :formatter="numberFormat" align="center" label="应缴金额" prop="budgetMoney" width="120"/>
      <el-table-column :formatter="numberFormat" align="center" label="已缴金额" prop="costMoney" width="120"/>
      <el-table-column :formatter="numberFormat" align="center" label="本金余额" prop="balance" width="120"/>
      <el-table-column :formatter="numberFormat" align="center" label="利息合计" prop="rateMoney" width="120"/>
      <el-table-column :formatter="numberFormat" align="center" label="本息合计" prop="balanceSum" width="120"/>
      <el-table-column :formatter="numberFormat" align="center" label="使用金额" prop="useMoney" width="120"/>
      <el-table-column align="center" label="面积" prop="space"/>
      <el-table-column align="center" label="房屋用途" prop="purposeName"/>
      <el-table-column align="center" label="收费标准" prop="price"/>
      <el-table-column align="center" label="房屋编号" prop="houseId"/>
      <el-table-column align="center" label="姓名" prop="userName"/>
      <el-table-column align="center" label="电话" prop="tel" width="120"/>
      <el-table-column align="center" label="证件号码" prop="papersCode" width="120" show-overflow-tooltip/>
      <el-table-column align="center" label="实测状态" prop="spaceSts">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.HOUSE002" :value="scope.row.spaceSts"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="最后缴费时间" prop="costDate" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.costDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="缴费状态" prop="costSts">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.HOUSE003" :value="scope.row.costSts"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="计息方式" prop="rateType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.HOUSE004" :value="scope.row.rateType"/>
        </template>
      </el-table-column>

      <el-table-column align="center" label="计息时间" prop="rateDate" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.rateDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建者" prop="creater"/>
      <el-table-column align="center" label="创建时间" prop="createDate" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" prop="remark" width="180"/>
      <el-table-column align="center" class-name="small-padding fixed-width" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-search"
            size="mini"
            type="text"
            @click="costQuery(scope.row)"
            :style="{ display: scope.row.areaName=='合计'?'none':'' }"
          >缴费记录
          </el-button>
          <el-button
            icon="el-icon-search"
            size="mini"
            type="text"
            @click="repairQuery(scope.row)"
            :style="{ display: scope.row.areaName=='合计'?'none':'' }"
          >分摊记录
          </el-button>
          <el-button
            icon="el-icon-search"
            size="mini"
            type="text"
            @click="handleRate(scope.row)"
            :style="{ display: scope.row.areaName=='合计'?'none':'' }"
          >计息明细
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
          <li @click="costQuery"> 缴费记录 </li>
          <li @click="rateQuery"> 计息明细</li>
        </ul>-->
    <pagination
      v-show="total>0"
      :limit.sync="queryParams.pageSize"
      :page.sync="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />

    <!-- 添加或修改户管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body width="600px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="小区" prop="areaName">
              <el-select v-model="form.areaName" :filter-method="filterMethod" allow-create clearable
                         default-first-option
                         filterable placeholder="请输入小区" size="small" @change="getGroup(form.areaName)">
                <el-option v-for="(item, index) in areaIdOptions" :key="index" :disabled="item.disabled"
                           :label="item.areaName" :value="item.areaName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="楼宇" prop="groupName">
              <el-select v-model="form.groupName" :style="{width: '100%'}" clearable placeholder="请输入楼宇"
                         @change="getUnit(form.areaName,form.groupName)">
                <el-option v-for="(item, index) in groupIdOptions" :key="index" :disabled="item.disabled"
                           :label="item.groupName" :value="item.groupName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单元" prop="unitName">
              <el-select v-model="form.unitName" :style="{width: '100%'}" clearable placeholder="请输入单元">
                <el-option v-for="(item, index) in unitNameOptions" :key="index" :disabled="item.disabled"
                           :label="item.unitName" :value="item.unitName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="户" prop="doorName">
              <el-input v-model="form.doorName" placeholder="请输入户"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用途" prop="purposeName">
              <el-select v-model="form.purposeName" :disabled="noWrite" :style="{width: '100%'}" clearable
                         placeholder="请输入用途">
                <el-option v-for="(item, index) in purposeOptions" :key="index" :disabled="item.disabled"
                           :label="item.purposeName" :value="item.purposeName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="面积" prop="space">
              <el-input v-model="form.space" :disabled="noWrite" placeholder="请输入面积"
                        @input="paymentChanges()"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="电话" prop="tel">
              <el-input v-model="form.tel" :disabled="noWrite" placeholder="请输入电话"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号码" prop="papersCode">
              <el-input v-model="form.papersCode" :disabled="noWrite" placeholder="请输入证件号码"/>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        <el-col :span="12">
                  <el-form-item label="房款" prop="houseMoney">
                    <el-input v-model="form.houseMoney" @change="paymentChanges" placeholder="请输入房款信息" :disabled="noWrite"/>
                  </el-form-item>
                </el-col>-->
        <el-row>
          <el-col :span="12">
            <el-form-item label="收费标准" prop="price">
              <el-select v-model="form.price" :disabled="noWrite" :style="{width: '100%'}" clearable
                         placeholder="请输入收费标准">
                <el-option v-for="(item, index) in feesOptions" :key="index" :disabled="item.disabled"
                           :label="item.price" :value="item.price"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="userName">
              <el-input v-model="form.userName" :disabled="noWrite" placeholder="请输入姓名"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入内容" type="textarea"/>
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="titleDoorExecute" :visible.sync="openDoor" append-to-body width="500px">
      <el-form ref="form" :model="formDoor" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="小区" prop="areaName">
              <el-select v-model="formDoor.areaName" :filter-method="filterMethod" allow-create clearable
                         default-first-option
                         filterable placeholder="请输入小区" size="small" @change="getGroup(formDoor.areaName)">
                <el-option v-for="(item, index) in areaIdOptions" :key="index" :disabled="item.disabled"
                           :label="item.areaName" :value="item.areaName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="楼宇" prop="groupName">
              <el-select v-model="formDoor.groupName" :style="{width: '100%'}" clearable placeholder="请输入楼宇"
                         @change="getUnit(formDoor.areaName,formDoor.groupName)">
                <el-option v-for="(item, index) in groupIdOptions" :key="index" :disabled="item.disabled"
                           :label="item.groupName" :value="item.groupName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单元" prop="unitName">
              <el-select v-model="formDoor.unitName" :style="{width: '100%'}" clearable placeholder="请输入单元">
                <el-option v-for="(item, index) in unitNameOptions" :key="index" :disabled="item.disabled"
                           :label="item.unitName" :value="item.unitName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="户" prop="doorName">
              <el-input v-model="formDoor.doorName" placeholder="请输入户"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDoorForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="titleRate" :visible.sync="openRateDate" append-to-body width="400px">
      <el-form ref="form" :model="formRateDate" :rules="rules" label-width="80px">
        <el-form-item label="房屋编号" prop="houseId">
          <el-input v-model="formRateDate.houseId" :style="{width: '100%'}" :disabled=true placeholder="请输入房屋编号"/>
        </el-form-item>
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker clearable size="small"
                              v-model="formRateDate.startDate"
                              type="date"
                              :style="{width: '100%'}"
                              value-format="yyyy-MM-dd"
                              placeholder="选择开始日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker clearable size="small"
                              v-model="formRateDate.endDate"
                              type="date"
                              :style="{width: '100%'}"
                              value-format="yyyy-MM-dd"
                              placeholder="选择结束日期">
              </el-date-picker>
            </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRateForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查看缴费记录 -->
    <el-dialog :title="title1" :visible.sync="openCost" append-to-body width="1000px">
      <el-form v-show="showSearch" :inline="true" :model="queryParams1" label-width="68px">
        <el-table v-loading="loading" :data="costQueryList">
          <el-table-column align="center" label="缴费编号" prop="costId"/>
          <el-table-column align="center" label="房屋编号" prop="houseId"/>
          <el-table-column align="center" label="流水号" prop="serial" width="200"/>
          <el-table-column :formatter="numberFormat" align="center" label="缴费金额" prop="costMoney"/>
          <el-table-column align="center" label="缴费时间" prop="costDate" width="120">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.costDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="缴费状态" prop="costSts">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.COST001" :value="scope.row.costSts"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="缴费渠道" prop="costWay">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.COST002" :value="scope.row.costWay"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="对账状态" prop="checkSts">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.COST003" :value="scope.row.checkSts"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发票号码" prop="billNo" width="200"/>
          <el-table-column align="center" label="收费员" prop="creater"/>
          <el-table-column align="center" label="创建时间" prop="createDate" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="备注" prop="remark"/>
        </el-table>
        <pagination
          v-show="total>0"
          :limit.sync="queryParams1.pageSize"
          :page.sync="queryParams1.pageNum"
          :total="total1"
          @pagination="getCostList"
        />
      </el-form>
    </el-dialog>
    <!-- 查看缴费记录 -->

    <el-dialog :title="title2" :visible.sync="openRepair" append-to-body width="1000px">
      <el-form v-show="showSearch" :inline="true" :model="queryParams3" label-width="68px" hight="100%">
        <el-table v-loading="loading" :data="repairQueryList">
          <el-table-column label="工程编号" align="center" :show-overflow-tooltip="true" width="120">
            <template slot-scope="scope">
              <router-link :to="'/repair/project-index/index/' + scope.row.id" @click.native="gotoProject(scope.row.projectId)" class="link-type">
                <span>{{ scope.row.projectId }}</span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column align="center" label="工程名称" prop="projectName" width="200"/>
          <el-table-column align="center" label="小区" prop="areaName" width="120"/>
          <el-table-column align="center" label="楼宇" prop="groupName"/>
          <el-table-column align="center" label="单元" prop="unitName"/>
          <el-table-column align="center" label="户" prop="doorName"/>
          <el-table-column align="center" label="房屋编号" prop="houseId"/>
          <el-table-column align="userName" label="姓名" prop="userName"/>
          <el-table-column :formatter="numberFormat"align="center" label="当前余额" prop="balancePre"/>
          <el-table-column :formatter="numberFormat"align="center" label="拨付金额" prop="payMoney"/>
          <el-table-column :formatter="numberFormat"align="center" label="分摊金额" prop="repairMoney"/>
          <el-table-column :formatter="numberFormat"align="center" label="不足金额" prop="noMoney"/>
          <el-table-column :formatter="numberFormat"align="center" label="分摊日期" prop="executeDate" width="120">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.executeDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :limit.sync="queryParams3.pageSize"
          :page.sync="queryParams3.pageNum"
          :total="total3"
          @pagination="getRepairList"
        />
      </el-form>
    </el-dialog>

    <!-- 查看计息明细记录 -->
    <el-dialog :title="title3" :visible.sync="openRate" append-to-body width="1000px">
      <el-form v-show="showSearch" :inline="true" :model="queryParams2" label-width="68px">
        <el-table v-loading="loading" :data="rateQueryList">
          <el-table-column align="center" label="房屋编号" prop="houseId" width="333"/>
          <el-table-column :formatter="numberFormat"align="center" label="利息合计" prop="rateMoney" width="333"/>
          <el-table-column align="center" label="计息日" prop="rateDate" width="334">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.rateDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :limit.sync="queryParams2.pageSize"
          :page.sync="queryParams2.pageNum"
          :total="total2"
          @pagination="getRateList"
        />
      </el-form>
    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px">
      <el-select v-model="upload.areaName" :style="{width: '100%'}" clearable placeholder="请输入小区">
        <el-option v-for="(item, index) in areaIdOptions" :key="index" :disabled="item.disabled"
                   :label="item.areaName" :value="item.areaName"></el-option>
      </el-select>
      <el-upload
        ref="upload"
        :action="upload.url + '?updateSupport=' + upload.updateSupport + '&areaName='+upload.areaName"
        :auto-upload="false"
        :disabled="upload.isUploading"
        :headers="upload.headers"
        :limit="1"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        accept=".xlsx"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div slot="tip" class="el-upload__tip">
          <el-checkbox v-model="upload.updateSupport"/>
          是否更新已经存在的用户数据
          <el-link style="font-size:12px" type="info" @click="importTemplate">下载模板</el-link>
        </div>
        <div slot="tip" class="el-upload__tip" style="color:red">提示：仅允许导入“xlsx”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="cancelFileForm">取 消</el-button>

      </div>
    </el-dialog>


    <el-dialog :title="titleInfo" :visible.sync="openInfo" width="600px" append-to-body>
      <el-form ref="formInfo" :model="formInfo" :rules="rulesInfo" label-width="80px">
        <el-form-item label="小区" prop="areaName">
          <el-select v-model="formInfo.areaName" placeholder="请输入小区" clearable :style="{width: '100%'}" @change="getGroup(formInfo.areaName)" :disabled="true" >
            <el-option v-for="(item, index) in areaIdOptions" :key="index" :label="item.areaName"
                       :value="item.areaName" :disabled="item.disabled" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼宇" prop="groupName">
          <el-select v-model="formInfo.groupName" placeholder="请输入楼宇" clearable :style="{width: '100%'}" @change="getUnit(formInfo.areaName,formInfo.groupName)" :disabled="true" >
            <el-option v-for="(item, index) in groupIdOptions" :key="index" :label="item.groupName"
                       :value="item.groupName" :disabled="item.disabled" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单元" prop="unitName">
          <el-select v-model="formInfo.unitName" placeholder="请输入单元" clearable :style="{width: '100%'}" :disabled="true" >
            <el-option v-for="(item, index) in unitNameOptions" :key="index" :label="item.unitName"
                       :value="item.unitName" :disabled="item.disabled" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="户" prop="doorName">
          <el-input v-model="formInfo.doorName" :disabled="noWrite" placeholder="请输入户" />
        </el-form-item>
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="formInfo.userName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input v-model="formInfo.tel" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="证件号码" prop="papersCode">
          <el-input v-model="formInfo.papersCode" placeholder="请输入证件号码" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formInfo.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitInfoForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog :title="titleDoorCostList" :visible.sync="openDoorCostList" width="1000px" append-to-body>
      <el-table v-loading="loading" :data="doorCostList">
        <el-table-column label="地址" width="240" align="center" prop="addr" />
        <el-table-column label="房屋编号" align="center" prop="houseId" />
        <el-table-column label="发票号码" width="170" align="center" prop="billNo" />
        <el-table-column label="姓名" align="center" prop="userName" />
        <el-table-column  :formatter="numberFormat"  label="已缴金额" align="center" prop="costMoney" />
        <el-table-column label="缴费时间" align="center" prop="costDate" width="150">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.costDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column  :formatter="numberFormat"  label="余额" align="center" prop="balance" />
        <el-table-column label="操作" align="center"  fixed="right"  class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="getDoorCost(scope.row)"
            >修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>


    <el-dialog :title="titleDoorCost" :visible.sync="openDoorCost" width="600px" append-to-body>
      <el-form ref="formDoorCost" :model="formDoorCost" :rules="rulesDoorCost" label-width="80px">
        <el-col :span="12">
          <el-form-item label="小区" prop="areaName">
            <el-select v-model="formDoorCost.areaName" placeholder="请输入小区" clearable :style="{width: '100%'}" @change="getGroup(formDoorCost.areaName)" :disabled="true" >
              <el-option v-for="(item, index) in areaIdOptions" :key="index" :label="item.areaName"
                         :value="item.areaName" :disabled="item.disabled" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="楼宇" prop="groupName">
            <el-select v-model="formDoorCost.groupName" placeholder="请输入楼宇" clearable :style="{width: '100%'}" @change="getUnit(formDoorCost.areaName,formDoorCost.groupName)" :disabled="true" >
              <el-option v-for="(item, index) in groupIdOptions" :key="index" :label="item.groupName"
                         :value="item.groupName" :disabled="item.disabled" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单元" prop="unitName">
            <el-select v-model="formDoorCost.unitName" placeholder="请输入单元" clearable :style="{width: '100%'}" :disabled="true" >
              <el-option v-for="(item, index) in unitNameOptions" :key="index" :label="item.unitName"
                         :value="item.unitName" :disabled="item.disabled" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="户" prop="doorName"  >
            <el-input v-model="formDoorCost.doorName" placeholder="请输入户名称" :disabled="true"/>
          </el-form-item>
        </el-col>
        <el-form-item label="已缴金额" prop="costMoney">
          <el-input v-model="formDoorCost.costMoney" placeholder="请输入已缴金额" />
        </el-form-item>
        <el-form-item label="发票号码" prop="billNo">
          <el-input v-model="formDoorCost.billNo" placeholder="请输入发票号码" />
        </el-form-item>
        <el-form-item label="缴费时间" prop="costDate">
          <el-date-picker clearable size="small"
                          v-model="formDoorCost.costDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择最后缴费时间" :style="{width: '100%'}">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDoorCostForm">确 定</el-button>
        <el-button @click="cancelDoorCost">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog :title="titleParameter" :visible.sync="openParameter" width="500px" append-to-body>
      <el-form ref="formParameter" :model="formParameter" :rules="rulesParameter" label-width="80px">
        <el-col :span="12">
          <el-form-item label="小区" prop="areaName">
            <el-select v-model="formParameter.areaName" placeholder="请输入小区" clearable :style="{width: '100%'}" @change="getGroup(formParameter.areaName)" :disabled="true" >
              <el-option v-for="(item, index) in areaIdOptions" :key="index" :label="item.areaName"
                         :value="item.areaName" :disabled="item.disabled" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="楼宇" prop="groupName">
            <el-select v-model="formParameter.groupName" placeholder="请输入楼宇" clearable :style="{width: '100%'}" @change="getUnit(formParameter.areaName,formParameter.groupName)" :disabled="true" >
              <el-option v-for="(item, index) in groupIdOptions" :key="index" :label="item.groupName"
                         :value="item.groupName" :disabled="item.disabled" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单元" prop="unitName">
            <el-select v-model="formParameter.unitName" placeholder="请输入单元" clearable :style="{width: '100%'}" :disabled="true"  >
              <el-option v-for="(item, index) in unitNameOptions" :key="index" :label="item.unitName"
                         :value="item.unitName" :disabled="item.disabled" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="户" prop="doorName">
            <el-input v-model="formParameter.doorName" placeholder="请输入户名称" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="用途" prop="purposeId">
          <el-select v-model="formParameter.purposeId" placeholder="请输入用途" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in purposeOptions" :key="index" :label="item.purposeName"
                       :value="item.purposeId" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="收费标准" prop="price">
          <el-select v-model="formParameter.price" placeholder="请输入收费标准" clearable :style="{width: '100%'}" :disabled="noWrite">
            <el-option v-for="(item, index) in feesOptions" :key="index" :label="item.price"
                       :value="item.price" :disabled="item.disabled" ></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="面积" prop="space">
          <el-input v-model="formParameter.space" placeholder="请输入面积" />
        </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitParameterForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <div ref="print" class="print-wrap" hidden>
      <div :style="{ width: '320px' }" class="print-preview">
        <div class="title">打印票据</div>
        <div class="divide_line"></div>
        <!-- ...小票内容html -->
        <div class="tip">请保存好小票，不要丢弃！</div>
        <!-- 底下logo二进制文件流，一定要用二进制文件流，保证浏览器打印能够拿到log -->
        <!-- <img class="image-wrap" src="data:image/png;base64,二进制文件流">-->
        <div id="year" class="div1">ddd</div>
        <div id="month" class="div2"></div>
        <div id="date" class="div3"></div>
        <div id="userName" class="div5"></div>
        <div id="space" class="div6"></div>
        <div id="addr" class="div7"></div>
        <div id="tel" class="div8"></div>
        <div id="formula" class="div10"></div>
        <div id="moneyTemp" class="div11"></div>
        <div id="money" class="div12"></div>
        <div id="unit" class="div13"></div>
      </div>
    </div>

    <el-dialog :title="titleCost" :visible.sync="openNoCost" append-to-body width="800px">
      <el-form ref="formCost" :model="formCost" :rules="rulesCost" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="小区" prop="areaName">
              <el-select v-model="formCost.areaName" :disabled="true" :style="{width: '100%'}" clearable
                         placeholder="请输入小区" @change="getGroup(formCost.areaName)">
                <el-option v-for="(item, index) in areaIdOptions" :key="index" :disabled="false"
                           :label="item.areaName" :value="item.areaName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="楼宇" prop="groupName">
              <el-select v-model="formCost.groupName" :disabled="true" :style="{width: '100%'}" clearable
                         placeholder="请输入楼宇" @change="getUnit(formCost.areaName,formCost.groupName)">
                <el-option v-for="(item, index) in groupIdOptions" :key="index" :disabled="item.disabled"
                           :label="item.groupName" :value="item.groupName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单元" prop="unitName">
              <el-select v-model="formCost.unitName" :disabled="true" :style="{width: '100%'}" clearable
                         placeholder="请输入单元">
                <el-option v-for="(item, index) in unitNameOptions" :key="index" :disabled="item.disabled"
                           :label="item.unitName" :value="item.unitName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="户" prop="doorName">
              <el-input v-model="formCost.doorName" :disabled="true" placeholder="请输入户名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="面积" prop="space">
              <el-input v-model="formCost.space" :disabled="true" placeholder="请输入面积"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资金余额" prop="balance">
              <el-input v-model="formCost.balance" :disabled="true" placeholder=""/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="利息合计" prop="rateMoney">
              <el-input v-model="formCost.rateMoney" :disabled="true" placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应缴金额" prop="budgetMoney">
              <el-input v-model="formCost.budgetMoney" :disabled="true" placeholder=""/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="缴费金额" prop="costMoney">
              <el-input v-model="formCost.costMoney" :disabled="true" placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="userName">
              <el-input v-model="formCost.userName" placeholder="请输入姓名"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="电话" prop="tel">
              <el-input v-model="formCost.tel" placeholder="请输入电话"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号码" prop="papersCode">
              <el-input v-model="formCost.papersCode" placeholder="请输入证件号码"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="交款类型">
              <el-select v-model="formCost.costBillType" :style="{width: '100%'}" placeholder="请选择">
                <el-option
                  v-for="dict in dict.type.HOUSE022"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款方式">
              <el-select v-model="formCost.costBillWay" :style="{width: '100%'}" placeholder="请选择">
                <el-option
                  v-for="dict in dict.type.HOUSE021"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="缴费时间" prop="costDate">
              <el-date-picker
                v-model="formCost.costDate"
                :style="{width: '100%'}"
                placeholder="选择缴费时间"
                type="date" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formCost.remark" placeholder="请输入内容" type="textarea"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCostForm">确 定</el-button>
        <el-button type="warning" @click="weChatPay">微信扫码支付</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 退款列表 -->
    <el-dialog :title="titleRefundList" :visible.sync="openRefundList" width="1000px" append-to-body>
      <el-table v-loading="loading" :data="refundList">
        <el-table-column label="地址" align="center" prop="doorAddr" width="200"/>
        <el-table-column label="房屋编号" align="center" prop="houseId" />
        <el-table-column label="姓名" align="center" prop="userName" />
        <el-table-column label="流水号" align="center" prop="serial" width="180" show-overflow-tooltip/>
        <el-table-column  :formatter="numberFormat"  label="缴费金额" align="center" prop="costMoney" />
        <el-table-column label="缴费时间" align="center" prop="costDate" width="120">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.costDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="缴费状态" align="center" prop="costSts">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.COST001" :value="scope.row.costSts"/>
          </template>
        </el-table-column>
        <el-table-column label="缴费渠道" align="center" prop="costWay">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.COST002" :value="scope.row.costWay"/>
          </template>
        </el-table-column>
        <el-table-column label="对账状态" align="center" prop="checkSts">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.COST003" :value="scope.row.checkSts"/>
          </template>
        </el-table-column>
        <el-table-column label="退款状态" align="center" prop="refundSts">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.COST005" :value="scope.row.refundSts"/>
          </template>
        </el-table-column>
        <el-table-column label="发票号码" align="center" prop="billNo" width="180" show-overflow-tooltip/>
        <el-table-column label="收费员" align="center" prop="creater" />
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column label="操作" align="center"  fixed="right"  class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="getRefund(scope.row)"
            >退款</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog :title="titleRefund" :visible.sync="openRefund" append-to-body width="500px">
      <el-form ref="formRefund" :model="formRefund"  label-width="80px">
        <el-form-item label="退款时间" prop="refundDate">
          <el-date-picker v-model="formRefund.refundDate"
                          :style="{width: '100%'}"
                          clearable
                          placeholder="选择执行时间"
                          type="date" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRefundForm">确 定</el-button>
        <el-button @click="cancelRefund">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {
  listDoor,
  getDoor,
  delDoor,
  addDoor,
  updateDoor,
  getAreaInfo,
  getAreaInfo1,
  getGroupInfo,
  getUnitInfo,
  getPurposeInfo,
  getFeesInfo,
  listRateQuery,
  updateInfo,
  getDoorCostList,
  getDoorCost,
  updateDoorCost,
  getParameter,
  updateParameter,
  getCost,
  insertCost,
  weChatPay,
  getRefundList,
  updateRefund,
  delReturn
} from "@/api/house/door";
import {listCostQuery} from "@/api/fund/costQuery";
import {listRepairQuery} from "@/api/repair/repairQuery";
import {getToken} from "@/utils/auth";


export default {

  name: "Door",
  dicts: ['HOUSE003', 'HOUSE004', 'HOUSE002', 'HOUSE018', 'HOUSE019', 'HOUSE024', 'COST001', 'COST002','COST003', 'COST005','COST001','HOUSE022','HOUSE021'],
  data() {
    return {
      visible: false,
      left: 0,
      top: 0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      noWrite: false,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      total1: 0,
      total2: 0,
      total3: 0,
      // 户管理表格数据
      doorList: [],
      doorCostList: [],
      costQueryList: [],
      repairQueryList: [],
      rateQueryList: [],
      refundList: [],
      // 弹出层标题
      title: "",
      title1: "",
      title2: "",
      title3: "",
      titleInfo: "",
      titleDoorCost: "",
      titleDoorExecute: "",
      titleDoorCostList: "",
      titleRate: "",
      titleParameter: "",
      titleCost: "",
      titleRefund: "",
      titleRefundList: "",
      // 是否显示弹出层
      open: false,
      openCost: false,
      openRepair: false,
      openRate: false,
      openRateDate: false,
      openDoor: false,
      openInfo: false,
      openDoorCost: false,
      openDoorCostList: false,
      openParameter: false,
      openNoCost: false,
      openRefund: false,
      openRefundList: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        areaName: null,
        groupName: null,
        unitName: null,
        doorName: null,
        houseId: null,
        purposeId: null,
        userName: null,
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/house/door/importData"
      },
      // 查询缴费参数
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        houseId: null,
        costDate: null,
        costSts: null,
        costWay: null,
        checkSts: null,
        billNo: null,
      },
      // 查询计息参数
      queryParams2: {
        pageNum: 1,
        pageSize: 10,
        houseId: null,
        rateMoney: null,
        startDate: null,
        endDate: null,
        rateDate: null
      },
      // 查询分摊参数
      queryParams3: {
        pageNum: 1,
        pageSize: 10,
        Name: null,
        groupName: null,
        unitName: null,
        doorName: null,
        areaName: null,
        houseId: null,
        projectId: null,
        executeDate: null,
        payMoney: null,
        noMoney: null,
        balance: null,
        startDate: null,
        endDate: null,
      },
      areaIdOptions: [{}],
      groupIdOptions: [{}],
      unitNameOptions: [{}],
      purposeOptions: [{}],
      feesOptions: [{}],
      // 表单参数
      form: {},
      formDoor: {},
      formRateDate: {
      },
      formInfo: {},
      formDoorCost: {},
      formParameter: {},
      formCost: {},
      formRefund: {refundDate:null},
      // 表单校验
      rules: {
        areaName: [
          {required: true, message: "小区不能为空", trigger: "change"}
        ],
        groupName: [
          {required: true, message: "楼宇不能为空", trigger: "change"}
        ],
        unitName: [
          {required: true, message: "单元不能为空", trigger: "change"}
        ],
        doorName: [
          {required: true, message: "户不能为空", trigger: "blur"}
        ],
        purposeName: [
          {required: true, message: "用途不能为空", trigger: "blur"}
        ],
        price: [
          {required: true, message: "收费标准不能为空", trigger: "blur"}
        ],
        space: [
          {required: true, message: "面积不能为空", trigger: "blur"}
        ],
      },
      rulesInfo: {
        areaName: [
          { required: true, message: "小区不能为空", trigger: "change" }
        ],
        groupName: [
          { required: true, message: "楼宇不能为空", trigger: "change" }
        ],
        unitName: [
          { required: true, message: "单元不能为空", trigger: "change" }
        ],
      },
      rulesParameter: {
        areaName: [
          { required: true, message: "小区不能为空", trigger: "change" }
        ],
        groupName: [
          { required: true, message: "楼宇不能为空", trigger: "change" }
        ],
        unitName: [
          { required: true, message: "单元不能为空", trigger: "change" }
        ],
        doorName: [
          { required: true, message: "户名称不能为空", trigger: "blur" }
        ],
        houseId: [
          { required: true, message: "房屋编号不能为空", trigger: "blur" }
        ],
        space: [
          { required: true, message: "面积不能为空", trigger: "blur" }
        ],
        price: [
          { required: true, message: "收费标准不能为空", trigger: "blur" }
        ],
        purposeId: [
          { required: true, message: "房屋用途id不能为空", trigger: "change" }
        ],
      },
      rulesDoorCost: {
        areaName: [
          { required: true, message: "小区不能为空", trigger: "change" }
        ],
        groupName: [
          { required: true, message: "楼宇不能为空", trigger: "change" }
        ],
        unitName: [
          { required: true, message: "单元不能为空", trigger: "change" }
        ],
        doorName: [
          { required: true, message: "户名称不能为空", trigger: "blur" }
        ],
        costMoney: [
          { required: true, message: "已缴金额不能为空", trigger: "blur" }
        ],
        costDate: [
          { required: true, message: "缴费时间不能为空", trigger: "blur" }
        ]
      },
      rulesCost: {
        costDate: [
          { required: true, message: "缴费时间不能为空", trigger: "change" }
        ],
      /*  userName: [
          { required: true, message: "姓名不能为空", trigger: "change" }
        ],
        tel: [
          { required: true, message: "电话不能为空", trigger: "change" }
        ],
        papersCode: [
          { required: true, message: "证件号码不能为空", trigger: "change" }
        ],*/
        costBillType: [
          { required: true, message: "不能为空", trigger: "change" }
        ],
        costBillWay: [
          { required: true, message: "不能为空", trigger: "change" }
        ],
      }
    };
  },
  created() {
    this.getList();
    this.areaSelect();
    this.filterMethod();
    this.purposeSelect();
    this.feesSelect();
  },
  methods: {
    numberFormat (row, column, cellValue) {
      cellValue += ''
      if (!cellValue.includes('.')) cellValue += '.'
      return cellValue.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
        return $1 + ','
      }).replace(/\.$/, '')
    },
    filterMethod(val) {
      this.value = val
      getAreaInfo1(this.value).then(response => {
        this.areaIdOptions = response.rows;
      });
    },

    tableRowClassName({row}) {
      return row.balance / row.budgetMoney > '0.3' ? 'color: black;' : (row.balance / row.budgetMoney <= 0.3 ? 'color: red;' : "")
    },
    areaSelect() {
      getAreaInfo().then(response => {
        this.areaIdOptions = response.rows;
      });
    },
    getGroup(areaName) {
      if (areaName != "") {
        getGroupInfo(areaName).then(response => {
          this.groupIdOptions = response.rows;
        });
      }
    },
    getUnit(areaName, groupName) {
      getUnitInfo(areaName, groupName).then(response => {
        this.unitNameOptions = response.rows;
      });
    },
    /** 执行按钮操作 */
    submitDoorForm(row) {

      const doorId = this.doorId;
      const areaName = this.formDoor.areaName
      const groupName = this.formDoor.groupName
      const unitName = this.formDoor.unitName
      const doorName = this.formDoor.doorName
      updateDoor(areaName, groupName, unitName, doorName,doorId).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.openDoor = false;
        this.getList();
      });
    },
    purposeSelect() {
      getPurposeInfo().then(response => {
        this.purposeOptions = response.rows;
      });
    },
    feesSelect() {
      getFeesInfo().then(response => {
        this.feesOptions = response.rows;
      });
    },
    /** 查询户管理列表 */
    getList() {
      this.loading = true;
      listDoor(this.queryParams).then(response => {
        this.doorList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.areaSelect();
      });
    },
    /** 查询缴费信息列表 */
    getCostList() {
      this.loading = true;
      listCostQuery(this.queryParams1).then(response => {
        this.costQueryList = response.rows;
        this.title1 = "缴费查询";
        this.total1 = response.total;
        this.loading = false;
      });
    },
    /** 查询缴费信息列表 */
    getRepairList() {

      this.loading = true;
      listRepairQuery(this.queryParams3).then(response => {
        this.repairQueryList = response.rows;
        this.title2 = "维修查询";
        this.total3 = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openDoor = false;
      this.openCost = false;
      this.openRepair = false;
      this.openRateDate = false;
      this.openInfo = false;
      this.openDoorCost = false;
      this.openDoorCostList = false;
      this.openParameter = false;
      this.openNoCost = false;
      this.openRefund = false;
      this.openRefundList = false;
      this.reset();
    },
    cancelDoorCost() {
      this.openDoorCost = false;
      this.reset();
    },
    cancelRefund() {
      this.openRefund = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        doorId: null,
        houseMoney: null,
        areaName: null,
        groupName: null,
        unitName: null,
        doorName: null,
        executeDate: null,
        houseId: null,
        space: null,
        purposeName: null,
        spaceSts: null,
        purposeId: null,
        userName: null,
        price: null,
        tel: null,
        papersCode: null,
        budgetMoney: null,
        purposeMoney: null,
        buildMoney: null,
        costMoney: null,
        useMoney: null,
        costDate: null,
        costSts: null,
        balance: null,
        rateType: null,
        rateMoney: null,
        rateDate: null,
        creater: null,
        createDate: null,
        remark: null
      };
      this.formDoor = {
        areaName: null,
        doorId: null,
        groupName: null,
        unitName: null,
        doorName: null
      };
      this.formRateDate = {
        doorId: null,
        houseId: null,
        startDate: null,
        endDate: null
      };
      this.formInfo = {};
      this.formDoorCost = {};
      this.formParameter = {};
      this.formCost = {};
      this.formRefund = {};
      this.resetForm("form");
      this.resetForm("formInfo");
      this.resetForm("formDoorCost");
      this.resetForm("formParameter");
      this.resetForm("formCost");
      this.resetForm("formRefund");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.areaSelect();
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.areaSelect();
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.doorId)
      this.doorId = selection.map(item => item.doorId)
      this.houseId = selection.map(item => item.houseId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /*    preventSelect(selection) {
          this.houseId = selection.houseId
        },*/

    openMenu(e) {
      this.reset();
      const menuMinWidth = 105
      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
      const offsetWidth = this.$el.offsetWidth // container width
      const maxLeft = offsetWidth - menuMinWidth // left boundary
      const left = e.clientX - offsetLeft + 15 // 15: margin right
      if (left > maxLeft) {
        this.left = maxLeft
      } else {
        this.left = left
      }
      this.top = e.clientY - 80
      this.visible = true
    },
    /*    close() {
          this.reset();
          this.visible = false
        },*/
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const doorId = row.doorId || this.ids
      getDoor(doorId).then(response => {
        this.noWrite = true;
        this.form = response.data;
        this.form.areaName = null;
        this.form.groupName = null;
        this.form.unitName = null;
        this.form.doorName = null;
        this.openDoor = true;
        this.titleDoorExecute = "户迁移";
      });
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset();
        this.noWrite = false;
        this.reset();
        this.areaSelect();
        this.open = true;
        this.title = "添加户管理";
    },
    /**输入日期查询利息合计  */
    handleRate(row) {
      this.reset();
      const doorId = row.doorId || this.ids
      getDoor(doorId).then(response => {
        this.formRateDate = response.data;
        this.openRateDate = true;
        this.titleRate = "输入日期查询利息合计";
      });
    },

    /** 获取计息记录 */
    rateQuery(formRateDate) {

      const houseId = formRateDate.houseId;
      const startDate = formRateDate.startDate;
      const endDate = formRateDate.endDate;
      this.queryParams2.houseId = houseId
      this.queryParams2.startDate = startDate
      this.queryParams2.endDate = endDate
      this.visible = false
      this.openRate = true;
      this.openRateDate = false;
      this.getRateList()
    },
    submitRateForm() {
      this.rateQuery(this.formRateDate);
    },
    /** 查询计息明细列表 */
    getRateList() {
      this.loading = true;
      this.reset();
      listRateQuery(this.queryParams2).then(response => {
        this.rateQueryList = response.rows;
        this.title3 = "计息查询";
        this.total2 = response.total;
        this.loading = false;
      });
    },

    /** 获取缴费记录 */
    /**    costQuery() {
      this.reset();
      const houseId = this.houseId
      this.queryParams1.houseId=houseId
      this.visible = false
      this.openCost = true;
      this.getCostList()
    },*/
    costQuery(row) {
      this.reset();
      const houseId = row.houseId;
      this.queryParams1.houseId = houseId
      this.visible = false
      this.openCost = true;
      this.getCostList()
    },
    repairQuery(row) {
      this.reset();
      const houseId = row.houseId;
      this.queryParams3.houseId = houseId
      this.visible = false
      this.openRepair = true;
      this.getRepairList()
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const doorIds = row.doorId || this.ids;
      this.$modal.confirm('是否确认删除户管理编号为"' + doorIds + '"的数据项？').then(function () {
        return delDoor(doorIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.doorId != null) {
            updateDoor(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addDoor(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.areaSelect();
              this.getList();
            });
          }
        }
      });
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('house/door/export', {
        ...this.queryParams
      }, `door_${new Date().getTime()}.xlsx`)
    },


    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },

    cancelFileForm() {
      this.upload.open = false;
      this.upload.areaName = null;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('door/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", {dangerouslyUseHTMLString: true});
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
      this.upload.areaName = null;
    },

    onSelectAll() {
      this.$refs.multipleTable.clearSelection();
    },
    selectItem(rows) {
      this.single = rows.length !== 1;
      if(rows.length == 1){
        this.ids = rows[0].doorId;
        this.doorId = rows[0].doorId;
        this.houseId = rows[0].houseId;
      }

      this.multiple = !rows.length;
      if (rows.length > 1) {
        const newRows = rows.filter((it, index) => {
          if (index == rows.length - 1) {
            this.$refs.multipleTable.toggleRowSelection(it, true);
            return true;
          } else {
            this.$refs.multipleTable.toggleRowSelection(it, false);
            return false;
          }
        });
        this.multipleSelection = newRows;
      } else {
        this.multipleSelection = rows;
      }
      this.userId = this.multipleSelection.length
        ? this.multipleSelection[0].guid
        : "";
    },
    onSelectOp(row) {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row, true);
      this.multipleSelection = [];
      this.multipleSelection.push(row);
    },

    //户信息修改
    infoCheck(row) {
      this.reset();
      const doorId = row.doorId || this.ids
      getDoor(doorId).then(response => {
        this.noWrite = true;
        this.formInfo = response.data;
        this.openInfo = true;
        this.titleInfo = "修改户信息修改";
      });
    },
    /** 提交按钮 */
    submitInfoForm() {
      this.$refs["formInfo"].validate(valid => {
        if (valid) {
          updateInfo(this.formInfo).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.openInfo = false;
            this.getList();
          });
        }
      });
    },


    //缴费信息修改
    doorCostCheck(row) {
      this.reset();
      const houseId = row.houseId || this.houseId
      getDoorCostList(houseId).then(response => {
        this.openDoorCostList = true;
        this.titleDoorCostList = "缴费信息列表";
        this.doorCostList = response.rows;
      });
    },
    getDoorCostList(houseId) {
      getDoorCostList(houseId).then(response => {
        this.openDoorCostList = true;
        this.titleDoorCostList = "缴费信息列表";
        this.doorCostList = response.rows;
      });
    },
    getDoorCost(row) {
      this.reset();
      const costId = row.costId
      getDoorCost(costId).then(response => {
        this.formDoorCost = response.data;
        this.openDoorCost = true;
        this.titleDoorCost = "修改缴费信息";
      });
    },
    submitDoorCostForm() {
      this.$refs["formDoorCost"].validate(valid => {
        if (valid) {
          updateDoorCost(this.formDoorCost).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.openDoorCost = false;
            this.getDoorCostList(this.formDoorCost.houseId);
          });
        }
      });
    },

    //户参数修改
    parameterCheck(row) {
      this.reset();
      const doorId = row.doorId || this.ids
      getParameter(doorId).then(response => {
        this.formParameter = response.data;
        this.openParameter = true;
        this.titleParameter = "户参数修改";
      });
    },
    /** 提交按钮 */
    submitParameterForm() {
      this.$refs["formParameter"].validate(valid => {
        if (valid) {
          updateParameter(this.formParameter).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.openParameter = false;
            this.getList();
          });
        }
      });
    },


    //缴费
    cost(row) {
      const doorId = row.doorId || this.ids
      getCost(doorId).then(response => {
        this.formCost = response.data;
        this.openNoCost = true;
        this.titleCost = "缴费";
      });
    },
    /** 提交按钮 */
    submitCostForm() {
      this.$refs["formCost"].validate(valid => {
        if (valid) {
          insertCost(this.formCost).then(response => {
            this.$modal.msgSuccess("缴费成功");
            this.openNoCost = false;
            this.getList();
          });
        }
      });
    },
    //扫码支付
    weChatPay() {
      this.$refs["formCost"].validate(valid => {
        if (valid) {
          return weChatPay(this.formCost).then(response => {
            let baseUrl = "http://" + response.data.addr;
            window.open(baseUrl);
          });
        }
      });
    },


    //退款
    refund(row) {
      this.reset();
      const houseId = row.houseId || this.houseId
      getRefundList(houseId).then(response => {
        this.openRefundList = true;
        this.titleRefundList = "退款信息列表";
        this.refundList = response.rows;
      });
    },
    getRefundList(houseId) {
      getRefundList(houseId).then(response => {
        this.openRefundList = true;
        this.titleRefundList = "退款信息列表";
        this.refundList = response.rows;
      });
    },
    getRefund(row) {
      this.reset();
      debugger
      const costId = row.costId
      this.formRefund.costId = costId;
      this.openRefund = true;
      this.titleRefund = "退款";
    },
    submitRefundForm() {
      this.$refs["formRefund"].validate(valid => {
        if (valid) {
          updateRefund(this.formRefund.costId, this.formRefund.refundDate).then(response => {
            this.$modal.msgSuccess("退款成功");
            this.openRefund = false;
            this.getRefundList(this.formRefund.houseId);
          });
        }
      });
    },


    //资金返还
    doorReturn(row) {
      const doorId = row.doorId || this.ids;
      delReturn(doorId).then(response => {
        this.$modal.msgSuccess("资金返还成功");
        this.getList();
      })
    },
    gotoProject(projectId){
      this.openRepair = false;
    }
  }
};
</script>

